import * as React from 'react';
import Header from '@/commonComponents/header/Header';
import Avatar from './components/avatar/index';
import ListItem from './components/listItem/index';
import Bottom from '@/commonComponents/bottom/index';
// import useAuth from '@/utils/hooks/useAuth';
import IconContacts from './components/listItem/icon_contacts.svg';
import IconOrder from './components/listItem/icon_order.svg';
import IconService from './components/listItem/icon_service.svg';
import './index.module.scss';
import { userInfoProps } from './types';
import { getUserInfo } from '../../utils/localStorge';
import { getToken } from '../../utils/localStorge';
// import { useNavigate } from 'react-router-dom';
const { memo } = React;

// 回到上一页
// const navigate = useNavigate();
// const onBack = () => {
//   navigate(-1);
// };

function User() {
  const token = getToken();
  const centerDataList = [
    { name: '常用乘客', src: <IconContacts /> },
    { name: '我的订单', src: <IconOrder /> },
    { name: '客服中心', src: <IconService /> },
  ];
  var userInfo: userInfoProps = {
    avatar: '',
    username: '',
    token: '',
  };
  if (token) {
    const newUserInfo = getUserInfo();
    if (newUserInfo) {
      userInfo = JSON.parse(newUserInfo);
    }
  }
  return (
    <div styleName="servies-box">
      <Header
        title={`个人中心`}
        type={2}
        onBack={() => {
          console.log;
        }}
      />
      <div styleName="top_avatar">
        <Avatar userInfo={userInfo} />
      </div>
      <div styleName="center-detail">
        <ListItem centerDataList={centerDataList} />
      </div>
      <Bottom />
    </div>
  );
}

export default memo(User);
